// 当DOM内容加载完毕后执行
document.addEventListener('DOMContentLoaded', () => {

    // 获取DOM元素
    const ipInput = document.getElementById('esp-ip');
    const connectBtn = document.getElementById('connect-btn');
    const statusText = document.getElementById('status-text');
    const eventsLog = document.getElementById('events-log');

    let eventSource = null; // 用于存储EventSource实例

    // 更新状态显示的函数
    function updateStatus(text, className) {
        statusText.textContent = text;
        statusText.className = ''; // 清除旧的class
        statusText.classList.add(className);
    }

    // 在日志区域添加新消息的函数
    function logEvent(message, eventType = 'message') {
        const logEntry = document.createElement('div');
        logEntry.classList.add('log-message');

        // 根据事件类型添加特定样式
        if (eventType === 'temperature') {
            logEntry.classList.add('event-temperature');
        } else if (eventType === 'humidity') {
            logEntry.classList.add('event-humidity');
        } else if (eventType === 'info') {
            logEntry.classList.add('event-info');
        } else if (eventType === 'error-event') { // 自定义错误事件
             logEntry.classList.add('event-error');
        }

        const timestamp = new Date().toLocaleTimeString();
        logEntry.innerHTML = `<span class="timestamp">[${timestamp}]</span> <strong>[${eventType}]</strong>: ${message}`;
        
        // 将新消息插入到日志顶部
        eventsLog.insertBefore(logEntry, eventsLog.firstChild);
    }

    // 连接到SSE服务器的函数
    function connect() {
        const ip = ipInput.value.trim();
        if (!ip) {
            alert('请输入有效的ESP32 IP地址！');
            return;
        }

        const sseUrl = `http://${ip}/sse`;

        // 如果已存在连接，先断开
        if (eventSource) {
            eventSource.close();
        }

        // 创建新的EventSource实例
        eventSource = new EventSource(sseUrl);

        updateStatus('连接中...', 'status-connecting');
        connectBtn.textContent = '断开';
        connectBtn.classList.add('disconnect');
        ipInput.disabled = true;

        // 连接建立时触发
        eventSource.onopen = () => {
            updateStatus('已连接', 'status-connected');
            logEvent('成功连接到 SSE 服务端。', 'info');
        };

        // 连接发生错误时触发
        eventSource.onerror = (error) => {
            console.error('EventSource 失败:', error);
            updateStatus('连接断开', 'status-disconnected');
            logEvent('连接错误或已断开。', 'error-event');
            disconnect(); // 调用断开函数清理资源
        };
        
        // 监听默认的 'message' 事件
        eventSource.onmessage = (event) => {
            console.log('收到默认消息:', event.data);
            logEvent(event.data, 'message');
        };

        // 监听自定义的 'temperature' 事件
        eventSource.addEventListener('temperature', (event) => {
            console.log('收到温度数据:', event.data);
            logEvent(event.data, 'temperature');
        });

        // 监听自定义的 'humidity' 事件
        eventSource.addEventListener('humidity', (event) => {
            console.log('收到湿度数据:', event.data);
            logEvent(event.data, 'humidity');
        });
    }

    // 断开连接的函数
    function disconnect() {
        if (eventSource) {
            eventSource.close();
            eventSource = null;
        }
        updateStatus('未连接', 'status-disconnected');
        connectBtn.textContent = '连接';
        connectBtn.classList.remove('disconnect');
        ipInput.disabled = false;
    }

    // 为连接/断开按钮添加点击事件监听器
    connectBtn.addEventListener('click', () => {
        if (eventSource) {
            disconnect();
        } else {
            connect();
        }
    });
});